<!DOCTYPE HTML>
<html>

<head>
	<title>测试</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="validator.js"></script>
	<style>
		.legal {color:green;}
		.invalid {color:red;}
	</style>
</head>

<body>
	<form id="myform">
		<table>
			<tr>
				<td>邮箱</td>
				<td>
					<input type="text" name="email" subType="email"/>
					<span id="tip_email"></span>
				</td>
			</tr>
			<tr>
				<td>手机号码</td>
				<td>
					<input type="text" name="mobile" required="true" subType="mobile"/>
					<span id="tip_mobile"></span>
				</td>
			</tr>
			<tr>
				<td>电话号码</td>
				<td>
					<input type="text" name="telephone" required="true" subType="telephone"/>
					<span id="tip_telephone"></span>
				</td>
			</tr>
			<tr>
				<td>电话号码或手机号码</td>
				<td>
					<input type="text" name="phone" required="true" subType="phone"/>
					<span id="tip_phone"></span>
				</td>
			</tr>
			<tr>
				<td>身份证号码</td>
				<td>
					<input type="text" name="idcard" required="true" subType="idcard"/>
					<span id="tip_idcard"></span>
				</td>
			</tr>
			<tr>
				<td>英文名</td>
				<td>
					<input type="text" name="name" required="true" subType="name" maxLength="20" minLength="6"/>
					<span id="tip_name"></span>
				</td>
			</tr>
			<tr>
				<td>中文名</td>
				<td>
					<input type="text" name="name_zh" required="true" subType="name_zh" maxLength="20" minLength="6"/>
					<span id="tip_name_zh"></span>
				</td>
			</tr>
			<tr>
				<td>时间</td>
				<td>
					<input type="text" name="date" required="true" subType="date"/>
					<span id="tip_date"></span>
				</td>
			</tr>
			<tr>
				<td>密码</td>
				<td>
					<input type="password" name="password" required="true" subType="password" maxLength="20" minLength="6"/>
					<span id="tip_password"></span>
				</td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td>
					<input type="password" name="password2" required="true" equalTo="password"/>
					<span id="tip_password2"></span>
				</td>
			</tr>
			<tr>
				<td>数字</td>
				<td>
					<input type="text" name="num" required="true" filters="09" max="200" min="100"/>
					<span id="tip_num"></span>
				</td>
			</tr>
			<tr>
				<td>小写字母</td>
				<td>
					<input type="text" name="az" required="true" filters="az" maxLength="200" minLength="5"/>
					<span id="tip_az"></span>
				</td>
			</tr>
			<tr>
				<td>大写字母</td>
				<td>
					<input type="text" name="azbig" required="true" filters="AZ" maxLength="200" minLength="5"/>
					<span id="tip_azbig"></span>
				</td>
			</tr>
			<tr>
				<td>纯中文</td>
				<td>
					<input type="text" name="zh" required="true" filters="zh" maxLength="200" minLength="5"/>
					<span id="tip_zh"></span>
				</td>
			</tr>
			<tr>
				<td>大小写</td>
				<td>
					<input type="text" name="azAZ" required="true" filters="az,AZ" maxLength="200" minLength="5"/>
					<span id="tip_azAZ"></span>
				</td>
			</tr>
			<tr>
				<td>自定义pattern</td>
				<td>
					<input type="text" name="only_a_is_allowed" required="true" pattern="^a+$"/>
					<span id="tip_only_a_is_allowed"></span>
				</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="测试"></td>
			</tr>
		</table>
	</form>
</body>
</html>
<script type="text/javascript">
validator.options.errors = {
	'num' : '此项只能填写数字！',
	'az' : '此项只能是小写字母',
	'azbig' : '此项只能是大写字母',
	'zh' : '此项只能是中文',
	'azAZ' : '此项只能是英文字母（大小写）',
	'only_a_is_allowed' : '只允许字母a'
};
validator.options.tpls.legal = 'ok!';
validator.setForm('myform', true);
</script>